<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<popup id=p1>This is a popup</popup>
<popup id=p2 open>This is another popup, with an unused "open" attribute</popup>

<script>
  test(function() {
    assert_true(document.createElement('popup') instanceof HTMLPopupElement);
  }, "popup element exists")

  const popup1 = document.getElementById('p1');
  const popup2 = document.getElementById('p2');

  function popupVisible(popup) {
    return !!(popup.offsetWidth || popup.offsetHeight || popup.getClientRects().length);
  }

  test(function(){
    assert_false(popup1.open);
    assert_false(popup2.open);
  }, 'The IDL "open" content attribute must have no effect, and must not be reflected to the WebIDL.');

  test(function(){
    assert_false(popup1.open);
    assert_false(popup1.hasAttribute("open"));
    assert_false(popupVisible(popup1));
    popup1.open = true; // Should have no effect
    assert_false(popup1.open);
    assert_false(popupVisible(popup1));
    popup1.show();
    assert_true(popup1.open);
    assert_false(popup1.hasAttribute("open"));
    assert_true(popupVisible(popup1));
    popup1.open = false; // Should have no effect
    assert_true(popup1.open);
    popup1.hide();
    assert_false(popup1.open);
    assert_false(popup1.hasAttribute("open"));
    assert_false(popupVisible(popup1));
    popup1.setAttribute("open","");
    assert_false(popup1.open,'Setting open attribute should not reflect to the WebIDL');
    assert_true(popup1.hasAttribute("open"));
    assert_false(popupVisible(popup1));
  }, "The only visibility control for <popup> is through .show() and .hide().");
</script>
